<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 本地 引入 layui.css -->
    <link rel="stylesheet" href="/layui/css/layui.css">
    <!-- 本地 layui.js -->
    <script src="/layui/layui.js"></script>

    <script src="/js/jquery-3.3.1.js"></script>
</head>
<body>
<button onclick="window4()">模态框</button>
<script>
    function window4() {

        layui.use(["layer"],function(){

            layer.open({
                type: 1 //Page层类型
                ,skin: 'layui-layer-molv'
                ,area: ['380px', '270px']
                ,title: ['编辑书本信息','font-size:18px']
                ,btn: ['确定', '取消']
                ,shadeClose: true
                ,shade: 0 //遮罩透明度
                ,maxmin: true //允许全屏最小化
                ,content:$("#window")  //弹窗路径 自定弹窗div
                ,success:function(layero,index){  // 当弹框显示出来后初始化弹框
                    $('#bid').val('23123'); // 设置input 默认值
                    $('#bname').val("一千零一夜");
                    $('#price').val(1000);
                },yes:function(index,layero){

                    alert("确定");
                    alert("获取表单数据"+$("#book").serialize());
                    // 将表单内容提交到数据库

                    layer.close(index);// 关闭窗口
                }
            });
        });
    }

</script>

<div class="site-text" style="margin: 5%; display: none" id="window"  target="test123">
    <form class="layui-form" id="book" method="post" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label">书本编号</label>
            <div class="layui-input-block">
                <input type="text" id="bid" name="bid" lay-verify="title" autocomplete="off" placeholder="请输入编号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">书本名称</label>
            <div class="layui-input-block">
                <input type="text" id="bname" name="bname" lay-verify="title" autocomplete="off" placeholder="请输入名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">书本价格</label>
            <div class="layui-input-block">
                <input type="text" id="price" name="price" lay-verify="title" autocomplete="off" placeholder="请输入价格" class="layui-input">
            </div>
        </div>



    </form>
</div>
</body>
</html>